<!--
 * @Description: 删除提醒
 * @Author: lixianggang
 * @Date: 2022-10-19 11:08:37
 * @LastEditors: lixianggang
 * @LastEditTime: 2022-12-13 19:44:27
-->
<template>
  <div class="check-wrap">
    <NormalForm pageTitle="删除提醒" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card table-card">
      <div class="bottom-btn mt16 mb16">
        <el-button type="primary" @click="setInformVisible = true" v-hasPermi="[`operate:deleteControl:setConfirm`]">通知设置</el-button>
      </div>
      <el-table :data="tableData" v-loading="tableLoading" height="470px" :row-style="{ height: '40px' }">
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column prop="wechatNickname" label="微信名" align="center" width="130">
          <template slot-scope="scope">
            <div class="create-by"> {{ scope.row.wechatNickname || "-" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="130">
          <template slot-scope="scope">
            <div> {{ scope.row.name || "-" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="delName" label="操作员工" align="center" width="130"> </el-table-column>
        <el-table-column prop="delTime" label="删除时间" align="center" :min-width="160"></el-table-column>
        <el-table-column prop="dealState" label="处理状态" align="center" width="130">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.dealState === 1">已处理</el-tag>
            <el-tag type="danger" v-if="scope.row.dealState === 0">未处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dealResult" label="处理结果" align="center" min-width="140"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="checkContent(scope.row)" :disabled="scope.row.dealState !== 0" v-hasPermi="[`operate:deleteControl:check`]">
              处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <set-inform :visible.sync="setInformVisible" :remindType="2"></set-inform>
    <dealwith-remind :visible.sync="dealwithVisible" :remindType="2" :currentNoticeId="currentNoticeId" @dealwithSuccess="handleQuery"></dealwith-remind>
  </div>
</template>

<script>
import SetInform from './components/SetInform.vue'
import DealwithRemind from './components/DealwithRemind.vue'
import { getRiskList } from '@/api/operate/riskControl'

export default {
  components: {
    SetInform,
    DealwithRemind,
  },
  data() {
    return {
      queryForm: {
        dealState: '',
        name: '',
        deptId: null,
        createCodeList: '',
        dateRange: [],
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '处理状态',
          value: '',
          prop: 'dealState',
          type: 'SELECT',
          emunName: 'stateList',
        },
        {
          label: '客户姓名',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: ''
        },
        {
          label: '',
          value: [],
          prop: 'dateRange',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
        {
          label: '员工',
          value: '',
          prop: 'createCodeList',
          type: 'STAFF',
          emunName: '',
        },
      ],
      enumOpt: {
        stateList: [],
      },
      tableData: [],
      total: 0,
      tableLoading: false,
      currentNoticeId: '',
      setInformVisible: false,
      dealwithVisible: false,
    }
  },
  mounted() {
    this.getDicts('deal_state').then((res) => {
      if (res.code === 200) {
        this.enumOpt.stateList = res.data
      }
    })
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getRiskListFn();
    },
    getRiskListFn() {
      const params = {
        noticeType: 2,
        dealState: this.queryForm.dealState,
        name: this.queryForm.name,
        createCodeList: this.queryForm.createCodeList + '',
        startTime: this.queryForm.dateRange?.[0],
        endTime: this.queryForm.dateRange?.[1],
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      }
      this.tableLoading = true
      getRiskList(params).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.rows || []
          this.total = res.data.total || 0
        }
        this.tableLoading = false
      })
    },
    handleReset() {
      this.queryForm = {
        name: '',
        dealState: '',
        deptId: null,
        createCodeList: '',
        dateRange: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.getRiskListFn()
    },
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getRiskListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getRiskListFn()
    },
    checkContent(row) {
      this.currentNoticeId = row.noticeId
      this.dealwithVisible = true
    },
  },
}
</script>

<style lang='scss' scoped>
@import '../../../styles/base.scss';
.check-wrap {
  height: 100%;
  .bottom-btn {
    text-align: right;
    margin-top: 10px;
  }
  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #06c160 !important;
    color: #06c160 !important;
  }
}

.table-card {
  padding: 16px;

  .table-page {
    text-align: right;
    height: 40px;
    margin-top: 15px;
  }

  .create-by {
    color: #082aff;
  }
}
</style>
